<template>
    <div id="containerId"></div>
</template>

<script setup>
import { onMounted } from "vue";
// 原理：基于 canvas 标签绘制像素点（位置，颜色等）在平面上计算出 3D 效果
// 下载并引入three库
import * as THREE from "three";

onMounted(() => {
    // 1.场景：放置物体的容器（世界）
    const scene = new THREE.Scene();

    // 2.摄像机：类似于人眼，决定看到多大的空间范围
    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

    // 3.渲染器：接收`场景`和`摄像机`，计算在浏览器上渲染的最终`2D画面`。
    const renderer = new THREE.WebGLRenderer({antialias: true});
    // 3.1 将输出canvas的大小调整为(width, height)
    renderer.setSize( window.innerWidth, window.innerHeight );

    // 添加到页面中
    document.getElementById("containerId").appendChild( renderer.domElement );

    // 把 场景+摄像机 传递给渲染器进行渲染
    renderer.render(scene, camera)
})
</script>